<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="flex">
    <DeptTree class="w-1/5 xl:w-1/6" @click="handleCheck" :treeParam="treeParam" v-dragSize style="width: 300px;" :isDisabled=true />
    <div class="main-container">
      <CommonDateSearch ref="searchRef" :immediate="false" @search="handleSearch"></CommonDateSearch>
      <div class="content-box">
        <div class="content-container">
          <div class="table-box">
            <Qoq ref="qoqRef"></Qoq>
          </div>
          <div class="table-box">
            <Yoy ref="yoyRef"></Yoy>
          </div>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts"
  setup>
  import { reactive, ref } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import DeptTree from '@/views/dataReport/DeptTree/index.vue';

  import Qoq from "./Qoq.vue";
  import Yoy from "@/views/dataReport/deviceParamReport/Yoy.vue";
  import CommonDateSearch from '@/components/CommonDateSearch/index.vue'


  defineOptions({ name: 'Deviceanagement' });
  const treeParam = {
    type: 1
  }
  const searchInfo = reactive<Recordable>({});


  let qoqRef = ref();
  let yoyRef = ref();
  let searchRef = ref();

  const handleSearch = (params) => {
    Object.assign(searchInfo, params)
    refreshData(searchInfo);
  }

  function refreshData(searchInfo) {
    qoqRef.value.getData(searchInfo)
    yoyRef.value.getData(searchInfo)
  }


  function handleCheck(keys, a) {
    let classifyIdList: any = []
    a.forEach((node) => {
      if (node.type === 1) {
        let param = {
          classifyId: String,
          deviceId: String
        };
        param.classifyId = node.parentClassifyId;
        param.deviceId = node.classifyId;
        classifyIdList.push(param);
      }
    });
    searchInfo.deviceList = classifyIdList;
    searchRef.value.handleSearch();
  }

</script>
<style scoped
  lang="less">
  .main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;

    .content-box {
      display: flex;
      flex: 1;
      overflow: auto;
      background: #fff;
      overflow: hidden;
      .content-container {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin: 8px;
        overflow-x: hidden;
      }

      .table-box {
        flex: 1;
        flex-shrink: 0;
        min-height: 340px;
        overflow: hidden;

        :deep(.ant-card-body) {
          padding: 8px 0;
        }
      }

    }
  }
</style>
